Форум

Lodas · #1 (**permalink**) 08.10.2012, 23:52

Здравствуйте уважаемые форумчане. Сделал подгрузку радио на страницу, при перемещении между index.html и page.html не могу понять почему оно все равно перегружается. Вот код:
Страница 1 index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="js/skript.js"> </script>
</head>
<body>
    <div id="contentBody"></div>
 
    <div id="loading" style="display: none">
    Идет загрузка...
    </div>
    <script type="text/javascript">
    showContent('radio.php');
    </script>
	<a href="page1.html">Ssilka</a>
	
</body>
</html>

Страница 2 (точная копия index.html но с учетом что ссылка ведет на страницу 1) page1.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
<script type="text/javascript" src="js/skript.js"> </script>
</head>
<body>
     <div id="contentBody"></div> 
    <div id="loading" style="display: none">
    Идет загрузка...
    </div>
    <script type="text/javascript">
    showContent('radio.php');
    </script>
	<a href="index.html">Ssilka</a>
</body>
</html>

Радио radio.php

<iframe 
 style="border:1px solid #898989;overflow:hidden;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius: 5px;"
 frameborder="0" scrolling="no" src="http://lovi.fm/mini/?c=4&a=1&r=1&h=165&s=856" width="320" height="95">
 </iframe>

И сам skript.js

function showContent(link) {
        //Получаем блоки и заносим их впеременные
        var cont = document.getElementById('contentBody');
        var loading = document.getElementById('loading');
 
        cont.innerHTML = loading.innerHTML;// устанавливает или получает всю разметку и содержание внутри данного элемента
 
        var http = createRequestObject();                   // создаем ajax-объект
        if( http ) {
            http.open('get', link);                         // инициируем загрузку страницы
            http.onreadystatechange = function () {         // назначаем асинхронный обработчик события
                if(http.readyState == 4) {
                    cont.innerHTML = http.responseText;     // присваиваем содержимое
                }
            }
            http.send(null);    
        } else {
            document.location = link;   // если ajax-объект не удается создать, просто перенаправляем на адрес
        }
    }
 
    // создание ajax объекта
    function createRequestObject() {
        try { return new XMLHttpRequest() }
        catch(e) {
            try { return new ActiveXObject('Msxml2.XMLHTTP') }
            catch(e) {
                try { return new ActiveXObject('Microsoft.XMLHTTP') }
                catch(e) { return null; }
            }
        }
    }

Помогите пожалуйста разобраться, хочу чтобы блок с радио не перезагружался при переходе по страницам(Страница 1, Страница 2), а работал как Ajax без перезагрузки

Dmitriyff · #2 (**permalink**) 09.10.2012, 10:49

эм... ну так вы ведь скриптом получаете не содержимое страниц при кликах по ссылкам, а сам блок радио, и все получается верно.
Щелкнули на ссылку, загрузилась страничка, а ajax-ом радио подтянули.

Вам обработчики надо вешать на ссылки, и ajax-ом получать содержимое страниц и выводить его

Lodas · #3 (**permalink**) 09.10.2012, 11:17

Спасибо. А можно поподробней? Вообщем какая у меня задумка была. За ходишь на Страницу 1 радио запускается, переходишь на Cтраницу 2- радио не перезагружается вместе со всей страницей и попрежнему продолжает играть.
Т.е при переходе по всем страницам был блок который не перезагружался. Страниц у меня будет очень много

Dmitriyff · #4 (**permalink**) 09.10.2012, 15:08

в рамках текущего развития интернета, вам стоит копать в разработку так называемых single page application, когда весь контент тягается и отправляется на сервер при помощи ajax.

Например как сделан сайт "вконтакте", вы слушаете музыку, переходя с одной страницы на другую, но плеер не перестает играть.

Для смены урл в данном случае используются либо HTML5 history api - это в новых браузерах, он позволяет менять урл страницы без ее перезагрузки, ибо если напрямую присвоить значение в

document.location = url;

страница перегрузится. либо используют изменения hash параметра в строке запроса, доступ к которому осуществляется через

document.location.hash = hash;

в данном случае страница не перегрузится, но hash в строке изменится. Совмещая два этих способа, получают лучший результат, поддержка старых версий браузеров при построении single page application

Вы конечно можете вообще забить на url, и никак его не менять, но интернет остается интернетом, и надо чтобы каждый ресурс имел свой адрес, чтобы можно было легко поделиться им. ну и при разработке single page application не стоит забывать про поисковики, которые еще не полностью освоили возможности ajax. так что даже при отключенном javascript, вы должны выдавать вменяемый контент

=-)))

Lodas · #5 (**permalink**) 09.10.2012, 16:15

Dmitriyff, а возможно ли сделать просто модальное окно в котором бы играло радио? Не приложения а именно модальное окно, т.е при переходе по другим страницам оно не перегружалось. Если возможно то как его реализовать? А то single page application создавать очень сложно

Dmitriyff · #6 (**permalink**) 09.10.2012, 16:39

вы можете реализовать используя iframe, почитайте про этот тег и как он применяется

разместите на странице два iframe один для радио другой для страниц

но при использовании этого подхода вы не получите изменение url, то есть вы не сможете дать ссылку на какую-нибудь конкретную страницу

Lodas · #7 (**permalink**) 09.10.2012, 16:57

Dmitriyff, вы не получите изменение url-не... так нельзя. Вот смотрите, в самом начале я реализовал подгрузку радио через аякс, как мне теперь запихнуть в модальное окно которое при переходе по страница не перезагружается? Вы говорили что то при нажатии на ссылку событие onclik?

Lodas · #8 (**permalink**) 09.10.2012, 16:59

Я просто совсем новичок, привидите пожалуйста пример кода такого модального окна- хотя бы упрощенный. А то что то я не пойму как такой блок сделать...

Lodas · #9 (**permalink**) 09.10.2012, 17:14

Просто у меня радио итак уже в iframe лежит

<iframe 
 style="border:1px solid #898989;overflow:hidden;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius: 5px;"
 frameborder="0" scrolling="no" src="http://lovi.fm/mini/?c=4&a=1&r=1&h=165&s=856" width="320" height="95">
 </iframe>

Lodas · #10 (**permalink**) 09.10.2012, 17:23

Объясните мне пожалуйста, а то я не догоняю

Форум

Справочник

Discord чат

Курсы javascript